<template>
  <div class="fication">
    <!-- 顶部 -->
    <van-search
      v-model="value"
      input-align="center"
      placeholder="请输入搜索关键词"
      @focus="onSearch"
    />

    <van-row>
      <van-col span="8">
        <van-sticky :offset-top="54">
          <van-sidebar v-model="activeKey">
            <van-sidebar-item
              v-for="(f, i) in classList"
              :key="i.fid"
              :title="f.fname"
            />
          </van-sidebar>
        </van-sticky>
      </van-col>
      <van-col span="16">
        <van-card
          v-for="(item, i) in product"
          :key="i"
          :price="item.price"
          :title="item.title"
          :thumb="`/img/product/${item.pic}`"
        >
          <template #tags>
            <van-tag plain type="danger">老街口</van-tag>
          </template>
          <template #footer>
            <van-button
              color="rgb(222, 196, 155)"
              plain
              type="primary"
              size="mini"
              >查看详情</van-button
            >
            <van-button color="rgb(222, 196, 155)" type="primary" size="mini"
              >加入购物车</van-button
            >
          </template>
        </van-card>
      </van-col>
    </van-row>

    <!-- 底部 -->
    <van-tabbar
      v-model="active"
      active-color="rgb(222,196,155)"
      inactive-color="#fff"
      class="footer"
    >
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o" to="/fication">分类</van-tabbar-item>
      <van-tabbar-item icon="cart-o" :to="`/cart/${this.uid}`"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item icon="orders-o" :to="`/orderlist/${this.uid}`"
        >订单</van-tabbar-item
      >
      <van-tabbar-item icon="contact" to="/mine">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 1,
      activeKey: 0,
      uid: sessionStorage.getItem("uid"),
      classList: [],
      product: [],
      value: "",
    };
  },
  mounted() {
    this.axios.get("/v1/products/fid").then((result) => {
      console.log(result.data);
      this.classList = result.data.data;
    });
    this.axios.get("/v1/products/1").then((result) => {
      console.log(result.data);
      this.product = result.data.data;
    });
  },
  methods: {
    onSearch() {
      this.$router.push("/search");
    },
  },
  watch: {
    // 监听函数
    activeKey(newValue, oldValue) {
      // console.log(newValue);
      this.axios.get(`/v1/products/${this.activeKey + 1}`).then((result) => {
        console.log(result.data);
        this.product = result.data.data;
      });
    },
  },
};
</script>

<style>
.fication .van-search {
  position: fixed;
  z-index: 10;
  width: 100%;
  background-color: rgb(222, 196, 155);
}
.fication .van-search__content {
  border-radius: 20px;
}
.fication .van-search__action {
  color: #fff;
  background-color: rgb(222, 196, 155);
}
.fication .van-sidebar-item--select::before {
  background-color: rgb(222, 196, 155);
}
.fication .van-sidebar-item--select {
  color: rgb(222, 196, 155);
}
.fication .van-col--8 {
  width: 25%;
  margin-top: 46px;
  margin-bottom: 50px;
  overflow-y: auto;
}
.fication .van-col--16 {
  width: 75%;
  margin-top: 60px;
  margin-bottom: 50px;
  overflow-y: auto;
}
.fication .van-card {
  background-color: #fff;
}
.fication .van-button {
  border-radius: 5px;
}
.fication .van-tabbar--fixed {
  background-color: rgb(222, 196, 155);
}
</style>